<template>
    <svg :width="width" :height="height" :viewBox="`0 0 ${width} ${height}`">
      <path :d="path" :stroke="stroke" :fill="fill" :stroke-width="strokeWidth" />
    </svg>
  </template>
  
  <script setup lang="ts">
  import { computed } from 'vue';
  
  const props = defineProps({
    data: {
      type: Array as () => number[],
      required: true
    },
    width: {
      type: Number,
      default: 100
    },
    height: {
      type: Number,
      default: 50
    },
    stroke: {
      type: String,
      default: '#409EFF'
    },
    fill: {
      type: String,
      default: 'rgba(64,158,255,0.1)'
    },
    strokeWidth: {
      type: Number,
      default: 2
    }
  });
  
  const path = computed(() => {
    const data = props.data;
    if (!data.length) return '';
  
    const max = Math.max(...data);
    const min = Math.min(...data);
    const range = max - min || 1;
    
    const width = props.width;
    const height = props.height;
    const gap = width / (data.length - 1);
  
    const points = data.map((value, index) => {
      const x = index * gap;
      const y = height - ((value - min) / range) * height;
      return `${x},${y}`;
    });
  
    const firstPoint = points[0];
    const lastPoint = points[points.length - 1];
  
    return `
      M ${firstPoint}
      ${points.slice(1).map(point => `L ${point}`).join(' ')}
      L ${width},${height}
      L 0,${height}
      Z
    `;
  });
  </script>